<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>家庭人生重要节点计算器</title>
    <style>
        body { font-family: '微软雅黑', Arial, sans-serif; margin: 40px; background: #f7f7f7; }
        .container { background: #fff; padding: 36px; border-radius: 12px; max-width: 650px; margin: auto; box-shadow: 0 4px 16px #bbb; }
        h1 { text-align: center; color: #4CAF50; letter-spacing: 2px; }
        .error { color: #d32f2f; font-weight: bold; margin-top: 18px; }
        .result { margin-top: 30px; }
        label { font-weight: bold; color: #333; }
        input[type="text"], input[type="number"], input[type="date"] { width: 100%; padding: 10px; margin-top: 6px; border-radius: 6px; border: 1px solid #bdbdbd; font-size: 16px; }
        .kids-inputs { margin-bottom: 18px; }
        .milestone-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 15px; }
        .milestone-table th, .milestone-table td { border: 1px solid #e0e0e0; padding: 10px; text-align: center; vertical-align: middle; }
        .milestone-table th {
            background: #e8f5e9;
            color: #388e3c;
            font-size: 16px;
            border-bottom: 2px solid #4CAF50;
        }
        .milestone-table tr:nth-child(even) { background: #f9f9f9; }
        .milestone-table td { font-size: 15px; }
        .milestone-table .highlight-red { color: #d32f2f; }
        .result h2 { color: #388e3c; margin-top: 32px; }
        .milestone-title { text-align: center; margin-bottom: 18px; }
    </style>
    <script id="defaultKidsData" type="application/json">
        {{ default_kids|tojson|safe }}
    </script>
    <script>
        var defaultKids = JSON.parse(document.getElementById('defaultKidsData').textContent);
        function updateKidsInputs() {
            var num = parseInt(document.getElementById('num_kids').value) || 0;
            var kidsDiv = document.getElementById('kids-inputs');
            kidsDiv.innerHTML = '';
            for (var i = 0; i < num; i++) {
                var val = (defaultKids.length > i) ? defaultKids[i] : '2015-01-01';
                kidsDiv.innerHTML += '<label>第' + (i+1) + '个孩子出生日期：</label>' +
                    '<input type="date" name="kid_birth_' + i + '" required value="' + val + '" />';
            }
            document.getElementById('child_idx').max = num;
        }
        window.onload = updateKidsInputs;
    </script>
</head>
<body>
<div class="container">
    <h1>家庭人生重要节点计算器</h1>
    <form method="post">
        <label>爸爸出生日期：</label>
        <input type="date" name="dad_birth" required value="{{ default_dad }}" />
        <label>妈妈出生日期：</label>
        <input type="date" name="mom_birth" required value="{{ default_mom }}" />
        <label>孩子数量：</label>
        <input type="number" name="num_kids" id="num_kids" min="1" max="10" value="{{ default_num_kids }}" required onchange="updateKidsInputs()" />
        <div class="kids-inputs" id="kids-inputs">
            {% for i in range(default_num_kids) %}
                <label>第{{ i+1 }}个孩子出生日期：</label>
                <input type="date" name="kid_birth_{{ i }}" required value="{{ default_kids[i] if default_kids|length > i else '2015-01-01' }}" />
            {% endfor %}
        </div>
        <button type="submit" style="margin-top:20px;width:100%;padding:12px;font-size:18px;background:#4CAF50;color:#fff;border:none;border-radius:6px;cursor:pointer;">计算</button>
    </form>
    {% if error %}
        <div class="error">{{ error }}</div>
    {% endif %}
    {% if all_kids_milestones %}
        {% for kid in all_kids_milestones %}
            <div class="result">
                <h2 class="milestone-title">{{ kid.child_role }}的人生重要节点</h2>
                <table class="milestone-table">
                    <tr>
                        <th>人生节点</th>
                        <th>时间</th>
                        <th>本人年龄</th>
                        <th>家庭成员年龄</th>
                    </tr>
                    {% for m in kid.milestones %}
                        <tr{% if m.node in ['中考', '高考', '结婚'] %} class="highlight-red"{% endif %}>
                            <td>
                                {{ '自己的孩子出生' if m.node == '孩子出生' else m.node }}
                            </td>
                            <td>{{ m.date }}</td>
                            <td>{{ m.child_age }}</td>
                            <td>{{ m.family_ages.replace('\n', '<br>')|safe }}</td>
                        </tr>
                    {% endfor %}
                </table>
            </div>
        {% endfor %}
    {% elif milestones %}
        <div class="result">
            <h2 class="milestone-title">{{ child_role }}的人生重要节点</h2>
            <table class="milestone-table">
                <tr>
                    <th>人生节点</th>
                    <th>时间</th>
                    <th>本人年龄</th>
                    <th>家庭成员年龄</th>
                </tr>
                {% for m in milestones %}
                    <tr{% if m.node in ['中考', '高考', '结婚'] %} class="highlight-red"{% endif %}>
                        <td>
                            {{ '自己的孩子出生' if m.node == '孩子出生' else m.node }}
                        </td>
                        <td>{{ m.date }}</td>
                        <td>{{ m.child_age }}</td>
                        <td>{{ m.family_ages.replace('\n', '<br>')|safe }}</td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    {% endif %}
</div>
</body>
</html> 